<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px" class="supplier-form">

      <el-divider content-position="left">基础信息</el-divider>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="供应商编码">
            <el-input v-model="form.num" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="供应商名称" required>
            <el-input v-model="form.name" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="默认仓库">
            <el-select v-model="form.depot" placeholder="请选择">
              <el-option label="仓库1" value="仓库1"></el-option>
              <el-option label="仓库2" value="仓库2"></el-option>
              <el-option label="仓库3" value="仓库3"></el-option>
              <el-option label="仓库4" value="仓库4"></el-option>
              <el-option label="仓库5" value="仓库5"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="供应商分类">
            <el-select v-model="form.typeId" placeholder="请选择">
              <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="区域">
            <el-cascader
              size="large"
              :options="pcaTextArr"
              v-model="form.address">
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="15">
          <el-form-item label="详细地址">
            <el-input v-model="form.fullAddress" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="邮编">
            <el-input v-model="form.zip" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="15">
          <el-form-item label="备注信息">
            <el-input v-model="form.memo" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="客户状态">
            <el-switch
              v-model="form.status"
              active-text="启用"
              inactive-text="禁用"
              active-color="#409EFF"
              inactive-color="#dcdfe6"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">联系人信息</el-divider>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="姓名">
            <el-input v-model="form.contactName" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手机号码">
            <el-input v-model="form.phone" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="部门">
            <el-input v-model="form.sector" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="职位">
            <el-input v-model="form.position" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="E-mail">
            <el-input v-model="form.email" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="QQ">
            <el-input v-model="form.qq" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider content-position="left">财务信息</el-divider>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="发票抬头">
            <el-input v-model="form.invoiceTitle" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="纳税人识别号">
            <el-input v-model="form.tiNum" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开户行">
            <el-input v-model="form.banking" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="开户姓名">
            <el-input v-model="form.bankingName" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="银行账号">
            <el-input v-model="form.bank" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24" style="text-align: right;">
          <el-button @click="resetForm">取消</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>


<script>
import {addManage, getManage, updateManage} from "@/api/suppliers/manage";
import { listType} from "@/api/suppliers/type";
import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";
export default {
  data() {
    return {
      form: {},
      typeList: [],
      pcaTextArr,
      id:0
    };
  },
  methods: {
    /** 查询分类列表 */
    getList() {
      this.loading = true;
      listType(this.queryParams).then(response => {
        this.typeList = response.rows;
      });
    },
    resetForm(){
      this.$router.push({ path: '/suppliers/manage/index' })
    },
    /** 提交按钮 */
    submitForm() {
      this.form.address = this.form.address.join(",");
      if (this.form.id != null) {
        updateManage(this.form).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.$router.push({ path: '/suppliers/manage/index' })
        });
      } else {
        addManage(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.$router.push({ path: '/suppliers/manage/index' })
        });
      }
    },
    /** 修改按钮操作 */
    handleUpdate() {
      getManage(this.id).then(response => {

        this.form = response.data;
        this.form.address = this.form.address.split(",");
      });
    },
  },
  created() {
    this.getList()
    this.id = this.$route.query.id
    this.handleUpdate()
  }
}
</script>


<style scoped>
.app-container {
  padding: 20px;
}

.supplier-form {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

.el-divider {
  margin: 20px 0;
}
</style>


